<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #ddd;
        }
    </style>
</head>

<body>

    <div>获取验证码</div>

    <button>获取验证码</button>

    <script>


        // 普通标签没有disabled属性  (不生效)    普通标签当做按钮用的时候，需要用flag
        // 只有表单有disabled属性    按钮  直接使用disabled



        var oBtn = document.querySelector('div');
        // var flag = true;
        // oBtn.onclick = function () {
        //     if (flag) {
        //         flag = false;
        //         var count = 10;
        //         // this就是指oBtn
        //         this.innerHTML = count + 's后可以再次获取';
        //         var t = setInterval(function () {
        //             count--;
        //             oBtn.innerHTML = count + 's后可以再次获取';
        //             if (count === 0) {
        //                 clearInterval(t);
        //                 flag = true;
        //                 oBtn.innerHTML = '获取验证码';
        //             }
        //         }, 500)
        //     }
        // }


        // 按钮自带flag  ->  disabled 

        oBtn.onclick = function () {
            oBtn.disabled = true;
            var count = 10;
            // this就是指oBtn
            this.innerHTML = count + 's后可以再次获取';
            var t = setInterval(function () {
                count--;
                oBtn.innerHTML = count + 's后可以再次获取';
                if (count === 0) {
                    clearInterval(t);
                    oBtn.disabled = false;
                    oBtn.innerHTML = '获取验证码';
                }
            }, 500)
        }


    </script>

</body>

</html>